@charset "UTF-8" ;

.progress-container {
    /* 当前元素采用relative定位是为了让其内部子元素可以相对该元素来进行绝对定位 */
    position: relative ;
    /* 指定元素宽度占父元素的百分比 */
    width: 100% ; 
    height: 30px ;
    line-height: 30px ;
    border: 1px solid blue;
}

.progress-container>.progress-bar {
    /* 相对于最近的非static定位的父元素进行定位 */
    position: absolute ;
    left: 0 ;
    top: 0 ;
    z-index: 10 ;
    height: 30px ;
    background: #dfdfdf;
}

.progress-container>.progress-text {
    /* 相对于最近的非static定位的父元素进行定位 */
    position: absolute ;
    left: 0 ;
    top: 0 ;
    z-index: 20 ;
    width: 100%;
    height: 30px ;
    text-align: center;
}